<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    {{fullname}}- {{fullname}}
    <hr>
    {{getFullname()}}-{{getFullname()}}
  </div>
  <script>


    var vm = new Vue({
      el: "#app",
      data: {
        firstname: "李",
        lastname: "小明",
        person: {
          username: 'admin',
          age: 20,
          address: "太原"
        }
      },
      computed: {
        // fullname() {
        //   console.log(1);
        //   return this.firstname + this.lastname;
        // }
        fullname: {
          get() {
            return this.firstname + this.lastname;
          }
          ,
          set(newval) {
            this.firstname = newval;
          }
        }
      },
      methods: {
        getFullname() {
          console.log(2);
          return this.firstname + this.lastname;
        },
        someMethod() {
          console.log('someMethod...')
        }
      },
      watch: {
        // firstname(newval, oldval) {
        //   console.log(newval, oldval)
        // },
        'firstname': {
          handler: 'someMethod',
          immediate: true
        },
        // ['person.age'](newval,oldval){
        //   console.log(newval, oldval)
        // },
        person: {
          handler(newval, oldval) {
            console.log(newval.age, oldval.age)
          },
          deep: true,
          immediate: true
        }
      }
    })

  </script>

</body>

</html>